<template>
  <div class="container">
    <div class="side-by-side">
      <router-link to="/inform" class="link-with-icon" style="text-decoration: none;">
        <el-icon class="green-icon" name="arrow-left"><CaretLeft/></el-icon>
      </router-link>
      <h1 class="side-by-side__title" >导游姓名</h1>
    </div>
  </div>
  <el-popover
      placement="right-start"
      title=""
      :width="200"
      trigger="hover"
      content="导游名片"
  >
    <template #reference >
      <router-link to="/inform" style="text-decoration: none;">
      <el-avatar class="portait" @click="" src="/lbxx/lbxx.jpg"/>
      </router-link>
    </template>
  </el-popover>

  <div>
<!--    <div id="chat-scroll" class="chat-container" ref="chatScroll">-->
<!--      &lt;!&ndash; 聊天消息列表 &ndash;&gt;-->
<!--      <div v-for="message in messages" :key="message.id" class="chat-message">-->
<!--        &lt;!&ndash; 消息内容 &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->



    <div style="margin: 0">
      <el-scrollbar height="400px">
        <el-row
            v-for="(item, index) in messageArr"
            :key="index"
            class="item-container"
        >
          <el-col
              :span="17"
              :class="{ 'float-left': !item.condition, 'float-right': item.condition }"
              style="
          background-color: antiquewhite;
          margin: 20px;
          border: 2px solid antiquewhite;
          height: 50px;
          border-radius: 20px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加阴影 */
        "
          >
        <span class="scrollbar-demo-item" style="line-height: 45px;margin: 0 15px;">
          {{ item.message }} <!-- 显示消息内容 -->
        </span>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>




    <el-input style="width: 1000px" v-model="saveInformDetail.message" placeholder="开始聊天吧!"></el-input>
    <el-button @click="saveMessage">发送</el-button>
  </div>

</template>


<script setup>

//查询历史信息
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

// const messageArr = ref([])
// const sender = ref(getUser());
//接收发送的信息
const sender = ref(getUser());
const saveInformDetail = ref({
  message: '',
  sender:'',
  receiver:''})
// saveInformDetailArr.value.sender=user.value

//保存发送的信息

const saveMessage = () => {
  if(!saveInformDetail.value.message){
    ElMessage.error('发送消息不能为空!');
    return;
  }
  console.log(saveInformDetail.value);
  let data = qs.stringify(saveInformDetail.value);
  axios.post(BASE_URL+'v1/chatMessage/saveChatMessage',data).then((response)=>{
    if(response && response.data && response.data.code == 2000){
      ElMessage.success('信息发送成功!');
      saveInformDetail.value = {message:''};
      //重新加载聊天记录
    }else {
      ElMessage.error('信息发送失败');
    }
  })
      .catch((error)=>{
        console.error('发送消息时发生错误:',error);
        ElMessage.error('发送消息时发生错误，请稍后重试');
      })

  /*axios.post(BASE_URL+'/v1/inform_detail/save',data).then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('发送成功!');
          messageArr.value={};
        }else{
          ElMessage.error('发送失败');
        }
      })*/
}
//实现关闭功能
const handleClose = () => {
  if(confirm('确定退出聊天框吗？')){
  }
}


</script>


<style scoped>
  .portait{
    transition: transform 0.3s ease;
    position: relative;
    z-index: 9999;
  }
  .portait:hover{
    transform: scale(1.5) translateX(10px);
  }
  .chat-container {
    height: 300px;
    overflow-y: auto;
  }
  .chat-message {

  }

  .container {
    display: flex;
    align-items: center;
  }

  .side-by-side {
    display: flex;
    align-items: center;
  }

  .link-with-icon {

  }

  .green-icon {
    color: grey;
    font-size: 30px;
    transition: 0.3s;
  }
  .green-icon:hover{
    scale: 1.3;
    color: darkcyan;
  }

  .side-by-side__title {
    margin-left: 10px;
  }
  .scrollbar-demo-item{
    z-index: 9998;
  }
</style>